import React, { Component } from 'react'
import { Card, message, Button, Table, Modal, Tag } from 'antd'
import './http.less'
import { reqHttpList, reqHttpDelete } from '../../../../api'
import { to } from 'await-to-js'
import { Link } from 'react-router-dom'
const { confirm } = Modal

export default class Http extends Component {

    state = {
        current: 1,
        size: 12,
        total: 0,
        loading: false,
        dataSource: []

    }

    async componentDidMount() {
        this.getHttpList()

    }

    getHttpList = async () => {
        this.setState({ loading: true })
        let [err, res] = await to(reqHttpList(this.state.current, this.state.size))
        this.setState({ loading: false })
        if (err) return console.log(err)
        if (res.code !== 0) return message.error(res.msg)

        let httpList = res.body.list
        this.setState({
            dataSource: httpList,
            total: res.body.total
        })
    }

    handleTableChange = (pagination) => {
        this.setState({
            current: pagination.current
        }, () => {
            this.getHttpList()
        })
    }

    delete = (_id) => {
        let that = this
        confirm({
            title: '提示?',
            content: '确定要删除吗?',
            async onOk() {
                let [err, res] = await to(reqHttpDelete(_id))
                if (err) return console.log(err)
                if (res.code !== 0) return message.error(res.msg)
                message.success(res.msg)
                that.getHttpList()
            },
            onCancel() {
            },
        });

    }

    render() {
        const { dataSource, total, size, loading } = this.state
        const columns = [
            { title: '站点url', dataIndex: 'url', key: 'url'},
            { title: '备注', dataIndex: 'remarks', key: 'remarks', },
            { title: '标记', dataIndex: 'mark', key: 'mark', },
            { title: '通知电话', dataIndex: 'phone', key: 'phone', },
            { title: '短信通知', dataIndex: 'notifyStatus', key: 'notifyStatus', render: text => <Tag color={text === 1 ? 'green' : 'red'}>{text === 1 ? '开启通知' : '停止通知'}</Tag>},
            { title: '状态', dataIndex: 'status', key: 'status', render: text => <Tag color={text === 1 ? 'green' : 'red'}>{text === 1 ? '开启监控' : '停止监控'}</Tag>},
            { title: '站点状态', dataIndex: 'urlStatus', key: 'urlStatus', render: text => <Tag color={text === 1 ? 'green' : 'red'}>{text === 1 ? '在线' : '离线'}</Tag>},
            { title: '创建时间', dataIndex: 'ctime', key: 'ctime', },
            { title: '停止时间', dataIndex: 'stopTime', key: 'stopTime', },
            { title: '最后监测时间', dataIndex: 'lastTime', key: 'lastTime', },
            {
                title: '操作', dataIndex: '', key: 'cz', render: (text) => {
                    return (
                        <span>
                            <Link to={"/siteMonitor/http/add/" + text._id}>
                                <Button type="link">编辑</Button>
                            </Link>
                            |
                            <Button type="link" onClick={() => this.delete(text._id)}>删除</Button>
                        </span>
                    )
                }
            },

        ]
        return (
            <Card title="http监控" className="http" extra={<Link to="/siteMonitor/http/add/0"><Button type="primary">添加站点</Button></Link>}>
                <Table
                    dataSource={dataSource}
                    columns={columns}
                    rowKey='_id'
                    pagination={{ total, defaultPageSize: size }}
                    loading={loading}
                    onChange={this.handleTableChange}
                />
            </Card>
        )
    }
}

